<div class="formio-table">
  {% if(ctx.isDymic) { %}
    <div class="formio-table-header">
      <button class="btn btn-primary formio-button-add-row" ref="{{ctx.tableKey}}-load" tabindex="{{ctx.tabIndex}}">
        <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t('Load', { _userInput: true })}}
      </button>
    </div>
  {% } %}
  <table class="table
      {{ ctx.component.striped ? 'table-striped' : ''}}
      {{ ctx.component.bordered ? 'table-bordered' : ''}}
      {{ ctx.component.hover ? 'table-hover' : ''}}
      {{ ctx.component.condensed ? 'table-sm' : ''}}
    ">
    {% if (ctx.component.header && ctx.component.header.length > 0) { %}
    <thead>
      <tr class="">
        {% ctx.component.header.forEach(function(header) { %}
        <th class="col-md-{{ctx.colWidth}}">{{ctx.t(header, { _userInput: true })}}</th>
        {% }) %}
      </tr>
    </thead>
    {% } %}
    <tbody>
      {% ctx.tableComponents.forEach(function(row, rowIndex) { %}
      <tr class="" ref="row-{{ctx.id}}">
        {% row.forEach(function(column, colIndex) { %}
        <td ref="{{ctx.tableKey}}-{{rowIndex}}"{% if (ctx.cellClassName) { %} class="{{ctx.cellClassName}} col-md-{{ctx.colWidth}}"{% } %}>{{column}}</td>
        {% }) %}
      </tr>
      {% }) %}
    </tbody>
  </table>
</div>
